<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 220px;
            height: 100px;
            margin: 100px auto;
        }


        span {
            display: inline-block;
            width: 40px;
            height: 40px;
            line-height: 40px;
            background-color: #222;
            color: #fff;
            text-align: center;
            font-weight: 700;
        }
    </style>
</head>

<body>
    <div class="box">
        <span id="spanHour">01</span>
        <span>:</span>
        <span id="spanMin">02</span>
        <span>:</span>
        <span id="spanSec">03</span>
    </div>
    <script>
        let hour = document.getElementById('spanHour');
        let min = document.getElementById('spanMin');
        let sec = document.getElementById('spanSec');
        let timeId = setInterval(function () {
            let h = parseInt(hour.innerText);
            let m = parseInt(min.innerText);
            let s = parseInt(sec.innerText);
            let date = new Date();
            // console.log(date.getDate());
            h = date.getHours();
            m = date.getMinutes();
            s = date.getSeconds();
            if (h < 10) { h = '0' + h };
            if (m < 10) { m = '0' + m };
            if (s < 10) { s = '0' + s };
            hour.innerText = h;
            min.innerText = m;
            sec.innerText = s;
            if (h == 20 & m == 15 & s == 0) {
                clearInterval(timeId);
            };
        }, 1000);
    </script>
</body>

</html>